<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <el-drawer
    title="交付货品"
    size="80%"
    :visible.sync="visibility"
    custom-class="demo-drawer"
    @close="closeDrawer"
  >
    <div class="demo-drawer__content">
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="right"
        label-width="120px"
      >
        <el-card v-for="order in currentData" :key="order.manufactureOrderId">
          <div slot="header">
            <span>通知单: {{ order.manufactureOrderCode }}</span>
          </div>
          <div>
            <el-row>
              <el-col :span="8">
                <el-form-item label="类型">
                  {{ formatByKeyValue(orderTypeOptions, order.orderType) }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="来源单号">
                  {{ order.sourceOrderCode }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="供应商编号">
                  {{ order.supplierCode }}
                </el-form-item>
              </el-col>
            </el-row>
              <el-col :span="22">
            <el-table ref="table" :data="order.goodsList" border align="center">
              <el-table-column
                align="center"
                label="货号"
                prop="goodsCode"
                max-width="250px"
              />
              <el-table-column
                align="center"
                label="货品简称"
                prop="goodsAbbr"
                width="200px"
              />
              <el-table-column
                align="center"
                label="批号"
                prop="goodsBatchCode"
                width="200px"
              />

              <el-table-column align="center" label="浓度" width="120px">
                <template slot-scope="{ row }">
                  {{ row.concentration }} {{ row.concentrationUnit }}
                </template>
              </el-table-column>

              <el-table-column align="center" label="规格" width="100px">
                <template slot-scope="{ row }">
                  {{ row.specification }} {{ row.unit }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="计划量" width="100px">
                <template slot-scope="{ row }">
                  {{ row.expectQuantity }} {{ row.unit }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="计划个数"
                width="100px"
                prop="expectCount"
              />
              <el-table-column align="center" label="实际量" width="100px">
                <template v-if="row.factQuantity" slot-scope="{ row }">
                  {{ row.factQuantity }} {{ row.unit }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="实际个数"
                width="100px"
                prop="factCount"
              />

              <el-table-column
                align="center"
                label="损耗量"
                width="100px"
                prop="attritionRate"
              />
              <el-table-column
                align="center"
                label="交付方式"
                prop="updateTime"
              >
                <template scope="{row}">
                  <el-select
                    v-if="row.type && row.type !== 2"
                    v-model="row.handOverResult"
                    placeholder="请选择"
                    @change="changeCity"
                  >
                    <el-option
                      v-for="item in resultListOptions"
                      :key="item.label"
                      :label="item.value"
                      :value="item.key"
                    />
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
              </el-col>
          </div>
        </el-card>
        <el-form-item style="margin-top: 20px">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleCommit">交付</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import {
  resultListPreOptions,
  saveResultOrder
} from '@/api/mes/manufactureResult.js'
import { formatByKeyValue } from '@/utils'
import { getTaskList } from '@/api/mes/manufactureTask.js'

export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    currentData: {
      required: true,
      type: Array,
      default: null
    },
    orderTypeOptions: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      temp: {
        //
      },
      orderList: [],
      resultListOptions: []
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        const data = {
          manufactureOrderIdList: this.currentData,
          withGoodsFlag: true
        }
        console.log(this.currentData, 'currentData')
        getTaskList(data).then((res) => {
          console.log(res, '8383838383')
        })
      }
    }
  },
  mounted() {
    resultListPreOptions().then((res) => {
      this.resultListOptions = res.data.handOverResult
    })
  },
  methods: {
    formatByKeyValue,
    handleClose() {
      this.visibility = false
    },
    handleCommit() {
      const data = {
        manufactureResultGoodsList: this.extractPushData(this.orderList),
        mem0: ''
      }
      saveResultOrder(data).then((res) => {
        this.handleManufactureTaskChang(this.temp)
      })
    },
    extractPushData(row) {
      const data = []
      row.forEach((e) => {
        e.goodsList.forEach((item) => {
          if (item.handOverResult !== 0) {
            data.push({
              handOverResult: item.handOverResult,
              manufactureTaskId: item.manufactureTaskId
            })
          }
        })
      })
      return data
    },
    changeCity() {
      this.$forceUpdate()
    },
    closeDrawer() {
      this.data = this.$options.data()
      //   this.$emit('updateOrderData')
    }
  }
}
</script>

<style lang="scss">
</style>

